
<template>
  <div id="r1_chart" style="height: 100%;" ></div>
</template>

<script setup>
import { DualAxes } from '@antv/g2plot'
import { onMounted} from 'vue'

const data=[

  { time: '10:10', tempeature: 25, humidity: 15 },
  { time: '10:11', tempeature: 23, humidity: 14 },
  { time: '10:12', tempeature: 26, humidity: 16 },
  { time: '10:13', tempeature: 25, humidity: 14 },
  { time: '10:14', tempeature: 22, humidity: 14 },
  { time: '10:15', tempeature: 24, humidity: 15 },
  { time: '10:16', tempeature: 24, humidity: 15 },
  { time: '10:17', tempeature: 26, humidity: 17 },
  { time: '10:18', tempeature: 23, humidity: 15 },
]

let options={
  data: [data, data],
  xField: 'time',
  yField: ['tempeature', 'humidity'],
  yAxis: {
    type: 'tempeature',
    axisLabel: {
      formatter: function (tempeature) {
        if (tempeature % 10 === 0) {
          return tempeature;
        } else {
          return '';
        }
      },
      show: true,
    },
    min: 0,
    max: 30,
    interval: 10,
  },
  geometryOptions: [
    {
      geometry: 'line',
      color: '#5B8FF9',
    },
    {
      geometry: 'line',
      color: '#5AD8A6',
    },
  ],
};

const init1Chart =()=>{
  let r1  = new DualAxes(document.getElementById('r1_chart'),options)

  r1.render()
}

onMounted(()=>{
  init1Chart();
})

</script>

<style lang='scss' scoped></style>